import React from 'react';
import { inject, observer } from 'mobx-react';
import { Spin, Button, Icon, Modal, Table, message, Radio } from 'antd'
import { WeaPopoverHrm, WeaBrowser, WeaNewScroll, WeaRightMenu, WeaSearchGroup, WeaInputNumber, WeaFormItem, WeaInput, WeaRichText, WeaTableEditable, WeaLocaleProvider, WeaDialog, WeaSelect,WeaUpload } from 'ecCom';
import * as Util from '../../util/Util'
import KnowledgeEdit from './../knowledge/KnowledgeEdit'
const getLabel = WeaLocaleProvider.getLabel;
const RadioGroup = Radio.Group;
const toJS = mobx.toJS;

@inject('KnowledgeMapEditStore')
@observer
export default class KnowledgeMapEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            columns: [
                {
                    title: <span>{getLabel(344, "主题")}</span>,
                    dataIndex: 'title',
                    key: 'title',
                    width: '*',
                    com: [
                        { type: 'INPUT', viewAttr: 3, key: 'title', placeholder: getLabel(344, "主题"), viewAttr: 2, defaultValue: '' },
                    ],
                },
                {
                    title: <span>{getLabel(27915, "知识点")}</span>,
                    dataIndex: 'klist',
                    key: 'klist',
                    width: '40%',
                    com: [
                        {
                            type: 'CUSTOM',
                            key: 'klist',
                            render: (text, record, index, onEdit) => (
                                <div>
                                    {text && text.length > 0 && text.map(function (data, idx) {
                                        return (
                                            <div className="klist-t">
                                                <div className="klist-name"><a title={data.name} href="javaScript:void(0)" onClick={() => this.onEditKnowledge(data, index, idx, "view")}>{data.name}</a></div>
                                                <div className="klist-rate">{data.rate}%</div>
                                            </div>
                                        )
                                    }, this)}
                                </div>
                            )
                        }
                    ],
                },
                {
                    title: <span>{getLabel(6071, "权重")}(%)</span>,
                    dataIndex: 'rate',
                    key: 'rate',
                    width: '10%',
                    com: [
                        { type: 'INPUTNUMBER', key: 'rate', defaultValue: 0, viewAttr: 2 },
                    ],
                },
                {
                    title: <span>{getLabel(338, "排序")}</span>,
                    dataIndex: 'sort',
                    key: 'sort',
                    width: '10%',
                    com: [
                        { type: 'INPUTNUMBER', key: 'sort', defaultValue: 0, viewAttr: 2 },
                    ],
                },
            ],
            columnsMapType: [
                {
                    title: <span>{getLabel(195, "名称")}</span>,
                    dataIndex: 'name',
                    key: 'name',
                    width: '*',
                    com: [
                        { type: 'INPUT', viewAttr: 3, key: 'name', placeholder: getLabel(195, "名称"), viewAttr: 2, defaultValue: '' },
                    ],
                },
                {
                    title: <span>{getLabel(338, "排序")}</span>,
                    dataIndex: 'dsporder',
                    key: 'dsporder',
                    width: '50%',
                    com: [
                        { type: 'INPUT', viewAttr: 3, key: 'dsporder', placeholder: getLabel(338, "排序"), viewAttr: 2, defaultValue: '' },
                    ],
                },
            ],
            colus: {
                title: <span>{getLabel(27915, "知识点")}</span>,
                dataIndex: 'klist',
                key: 'klist',
                width: '40%',
                com: [
                    {
                        type: 'CUSTOM',
                        key: 'klist',
                        render: (text, record, index, onEdit) => (
                            <div className="klist-div">
                                {text && text.length > 0 && text.map(function (data, idx) {
                                    return (
                                        <div className="klist-t" onMouseOut={(e) => this.onMouseOut(e, index, idx)} onMouseOver={(e) => this.onMouseOver(e, index, idx)}>
                                            <div className="klist-name" style={{ width: "40%", verticalAalign: "top" }}><a title={data.name} onClick={() => this.onEditKnowledge(data, index, idx, "edit")}>{data.name}</a></div>
                                            <div className="klist-rate" style={{ width: "60%" }}><WeaInputNumber style={{ width: 55 }} value={data.rate} viewAttr={2} max={100} min={0} onChange={(val) => this.onInputNumChange(val, index, idx)} />
                                                %<span className="klist-span" onClick={(e) => this.ondelClick(e, index, idx)}>删除</span>
                                                <img src="/images/ecology8/workflow/fileupload/upload_wev8.png" title="下移" className="kt_moveDown" style={{ display: data.display }} onClick={(e) => this.movePosition(e, index, idx, 1)} />
                                                <img src="/images/ecology8/workflow/fileupload/upload_wev8.png" title="上移" className="kt_moveUp" style={{ display: data.display }} onClick={(e) => this.movePosition(e, index, idx, 2)} />
                                            </div>
                                        </div>
                                    )
                                }, this)}
                                <div style={{ float: "right" }}>
                                    <WeaBrowser
                                        type={"kledgepoint"}
                                        customized
                                        inputStyle={{ width: 60 }}
                                        isSingle={false}
                                        onChange={(ids, names, datas) => this.onBrowserChange(ids, names, datas, index)}
                                    >
                                        <Button>浏览</Button>
                                    </WeaBrowser>
                                    <Button onClick={(e) => this.onCreateKnowledge(e, index)}>新建</Button>
                                    <Button onClick={(e) => this.onAVGRate(e, index)}>均分权重</Button>
                                </div>
                            </div>
                        )
                    }
                ],
            },
            colus1: {
                title: <span>{getLabel(27915, "知识点")}</span>,
                dataIndex: 'klist',
                key: 'klist',
                width: '40%',
                com: [
                    {
                        type: 'CUSTOM',
                        key: 'klist',
                        render: (text, record, index, onEdit) => (
                            <div>
                                {text && text.length > 0 && text.map(function (data, idx) {
                                    return (
                                        <div className="klist-t">
                                            <div className="klist-name"><a title={data.name} href="javaScript:void(0)" onClick={() => this.onEditKnowledge(data, index, idx, "view")}>{data.name}</a></div>
                                            <div className="klist-rate">{data.rate}%</div>
                                        </div>
                                    )
                                }, this)}
                            </div>
                        )
                    }
                ],
            },
            menu1: {
                key: '0',
                icon: <i className='icon-coms-edit' />,
                content: getLabel(93, "编辑"),
                onClick: key => this.editData()
            },
            menu2: {
                key: '1',
                icon: <i className='icon-coms-delete' />,
                content: getLabel(91, "删除"),
                onClick: key => this.handleMenuClick(1)
            },
            menu3: {
                key: '2',
                icon: <i className='icon-coms-Right' />,
                content: "进入",
                onClick: key => this.handleMenuClick(2)
            },
            menu4: {
                key: '3',
                icon: <i className='icon-coms-link' />,
                content: "URL",
                onClick: key => this.handleMenuClick(3)
            },
            menu5: {
                key: '4',
                icon: <i className='icon-coms-Revoke' />,
                content: getLabel(201, "取消"),
                onClick: key => this.handleMenuClick(4)
            },
            menu6: {
                key: '5',
                icon: <i className='icon-coms-Save-as' />,
                content: getLabel(201, "保存"),
                onClick: key => this.saveData()
            },
            refeshid: -1,
            viewHeight: this.getHeight(),
            knowledgeId: "",// || this.props.knowledgeId 
            operation: "",// || this.props.operation
            visible2: false,
            visibleMapType: false,
            currentindex: 0,
            currentidx: 0,
            kid: '',
            knowledgeOperate: 'add',
        }
        this.isfresh = true;
    }
    componentWillMount() {//一些初始化请求
        this.initKnowledgePage(this.props);
    }
    componentWillUnmount() {
        this.cleanValues();
    }
    componentWillReceiveProps(newProps) {
        if (newProps.operation == 'add') {
            this.cleanValues();
        }
        this.initKnowledgePage(newProps);
    }

    cleanValues() {
        let { KnowledgeMapEditStore } = this.props;
        KnowledgeMapEditStore.name = "";
        KnowledgeMapEditStore.remark = "";
        KnowledgeMapEditStore.datas = [];
        KnowledgeMapEditStore.mbtitle = "";
        KnowledgeMapEditStore.mbbg = "";
        KnowledgeMapEditStore.modellist = [];
        KnowledgeMapEditStore.tId = "1";
        KnowledgeMapEditStore.type = 0;
        KnowledgeMapEditStore.previewimg = "";
        KnowledgeMapEditStore.previewimgArray = [];
        KnowledgeMapEditStore.maptype = "";
        KnowledgeMapEditStore.iframeSrc = "";
    }


    initKnowledgePage(props) {
        const { KnowledgeMapEditStore } = this.props;
        let { columns, colus, colus1 } = this.state;
        let operation = Util.getParams("operation") || props.operation;
        let knowledgeId = Util.getParams("knowledgeId") || props.knowledgeId;
        this.setState({ knowledgeId: knowledgeId, operation: operation });
        if (operation == "edit" || operation == "add") {
            columns[1] = colus;
            columns.map((element, index) => {
                element.com[0].viewAttr = 2;
            })
        } else if (operation == "view") {
            columns[1] = colus1;
            columns.map((element, index) => {
                element.com[0].viewAttr = 1;
            })
        }
        if (knowledgeId) {
            KnowledgeMapEditStore.getKnowledgeDetail({ "knowledgeId": knowledgeId, "operation": operation });
        } else if (operation == "add") {
            KnowledgeMapEditStore.getshowModeList({});
        }
    }

    editData() {
        let { columns, colus } = this.state;
        const { KnowledgeMapEditStore, knowledgeId } = this.props;
        if (KnowledgeMapEditStore.type == "1") {
            KnowledgeMapEditStore.iframeSrc = "/knowledgeMap/base/MapModelType.jsp?mapId=" + knowledgeId;
        }
        this.setState({ operation: 'edit' });
        columns[1] = colus;
        columns.map((element, index) => {
            element.com[0].viewAttr = 2;
        })
    }
    cancleData() {
        let { columns, colus1 } = this.state;
        const { KnowledgeMapEditStore, knowledgeId } = this.props;
        if (KnowledgeMapEditStore.type == "1") {
            KnowledgeMapEditStore.iframeSrc = "/knowledgeMap/template/ShowFckEditorDesc1.jsp?requestid=1&mapId=" + knowledgeId;
        }
        columns[1] = colus1;
        columns.map((element, index) => {
            element.com[0].viewAttr = 1;
        });
        this.setState({ operation: 'view' });
    }
    handleMenuClick(type) {
        const { KnowledgeMapEditStore, knowledgeId } = this.props;
        const { operation } = this.state;
        if (type == "1") {//删除
            if (typeof this.props.onCancelDia === "function") {
                this.props.onCancelDia(1, knowledgeId);
            }
        } else if (type == '2') {//进入
            window.open("/knowledgeMap/data/MainInfo.jsp?mapId=" + knowledgeId);
        } else if (type == '3') {//url
            window.prompt("地址", location.protocol + "//" + location.host + "/knowledgeMap/data/MainInfo.jsp?mapId=" + knowledgeId);
        } else if (type == 4) {//取消
            if (operation == "add" || operation == "view") {
                if (typeof this.props.onCancelDia === "function") {
                    this.props.onCancelDia(2);
                }
            } else if (operation == "edit") {
                this.cancleData();
            }
        }
    }
    saveData() {
        const { KnowledgeMapEditStore } = this.props;
        let { name, remark, tId, type, datas,maptype,previewimg } = KnowledgeMapEditStore;
        let { operation, knowledgeId } = this.state;
        let _contents = "";
        if (typeof modelView != 'undefined') {
            _contents = modelView.window.saveData();
        } else {
            const result = this.refs.tableEdit.doValidate();
            let passStatues = result.pass;
            if (!passStatues) {
                Modal.error({
                    title: '提示',
                    content: '必要信息不完善！',
                });
                return;
            }
        }
        let sumRate = 0;
        let isok = true;
        for (let i = 0; i < datas.length; i++) {
            sumRate = sumRate + parseFloat(datas[i].rate);
            let klist = datas[i].klist;
            let k_sum = 0;
            for (let j = 0; j < klist.length; j++) {
                k_sum = k_sum + parseFloat(klist[j].rate);
            }
            if (k_sum != 100 && klist.length > 0) {
                isok = false;
            }
        }
        if (name.length == 0) {
            Modal.error({
                title: '提示',
                content: '知识地图名称不能为空!',
            });
            return;
        }
        if (sumRate != 100 && datas.length > 0) {
            Modal.error({
                title: '提示',
                content: '明细权重填写不正确!',
            });
            return;
        }
        if (!isok) {
            Modal.error({
                title: '提示',
                content: '主题知识点权重填写不正确!',
            });
            return;
        }
        let _this = this;
        KnowledgeMapEditStore.saveKnowledge({
            name: name, remark: remark, datas: JSON.stringify(datas), contents: _contents, operation: operation, knowledgeId: knowledgeId, tempId: tId, type: type,maptype,previewimg,doback: function (knowledgeId, updatedate, updateid, updatename) {
                message.success('保存成功!', 2);

                let optparams = [];
                optparams.rowid = knowledgeId;
                optparams.opttype = operation;
                optparams.type = ["name", "updateDate", "updaterId", "updaterName"];
                optparams.value = [KnowledgeMapEditStore.name, updatedate, updateid, updatename];
                if (typeof _this.props.onCallBackSuccess === "function") {
                    _this.props.onCallBackSuccess(optparams);
                }
            }
        });
    }

    getHeight() {
        let { minusHeight } = this.props;
        if (minusHeight == undefined) {
            minusHeight = 0;
        }
        return window.innerHeight - 110 - minusHeight;
    }

    onInputChange = (values, type, typenName) => {
        let { KnowledgeMapEditStore } = this.props;
        if (KnowledgeMapEditStore[type] != values) {
            KnowledgeMapEditStore[type] = values;
        }
    }
    onInputNumChange = (val, index1, index2) => {
        let { KnowledgeMapEditStore } = this.props;
        let _data = KnowledgeMapEditStore.datas;
        _data[index1].klist[index2].rate = val;
        KnowledgeMapEditStore.datas = _data;
    }
    ondelClick = (e, index1, index2) => {
        let { KnowledgeMapEditStore } = this.props;
        Modal.confirm({
            content: `确认要删除吗? `,
            onOk: () => {
                let _data = KnowledgeMapEditStore.datas;
                let _data1 = _data[index1].klist[index2];
                _data[index1].klist.remove(_data1);
                KnowledgeMapEditStore.datas = _data;
            },
            onCancel: () => {
            },
        })
    }
    onMouseOver = (e, index1, index2) => {
        let { KnowledgeMapEditStore } = this.props;
        let _data = KnowledgeMapEditStore.datas;
        _data[index1].klist[index2].display = "inline-block";
        KnowledgeMapEditStore.datas = _data;
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    }
    onMouseOut = (e, index1, index2) => {
        let { KnowledgeMapEditStore } = this.props;
        let _data = KnowledgeMapEditStore.datas;
        _data[index1].klist[index2].display = "none";
        KnowledgeMapEditStore.datas = _data;
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    }
    movePosition = (e, index1, index2, type) => {
        let { KnowledgeMapEditStore } = this.props;
        let _data = KnowledgeMapEditStore.datas;
        let _klist = _data[index1].klist;
        let _len = _klist.length;
        if (type == 1) {//下移
            if ((_len - 1) != index2) {
                let c_v = _klist[index2];
                let n_v = _klist[index2 + 1];
                _klist[index2] = n_v;
                _klist[index2 + 1] = c_v;
                _data[index1].klist = _klist;
            }
        } else {//上移
            if (index2 != 0 && _len > 1) {
                let c_v = _klist[index2];
                let p_v = _klist[index2 - 1];
                _klist[index2] = p_v;
                _klist[index2 - 1] = c_v;
                _data[index1].klist = _klist;
            }
        }
        KnowledgeMapEditStore.datas = _data;
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    }
    onAVGRate = (e, index) => {//权重均分
        let { KnowledgeMapEditStore } = this.props;
        let _data = KnowledgeMapEditStore.datas;
        let _klist = _data[index].klist;
        let _len = _klist.length;
        if (_len > 0) {
            let avgValue = parseInt(100 / _len);
            _klist.map(function (data, idx) {
                if (idx == (_len - 1)) {
                    _data[index].klist[idx].rate = 100 - avgValue * (_len - 1);
                } else {
                    _data[index].klist[idx].rate = avgValue;
                }
            })
        }
        KnowledgeMapEditStore.datas = _data;
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    }
    onCreateKnowledge = (e, index) => {
        this.setState({ visible2: true, currentindex: index, kid: '', knowledgeOperate: 'add' });
    }
    onEditKnowledge = (data, index, idx, operate) => {
        let kId = data.kId;
        this.setState({ visible2: true, currentindex: index, kid: kId, knowledgeOperate: operate, currentidx: idx });
    }
    onDialogCancel() {
        this.setState({ visible2: false });
    }
    addNewKnowledge(optparam) {
        let { KnowledgeMapEditStore } = this.props;
        let _data = KnowledgeMapEditStore.datas;
        let { currentindex, knowledgeOperate, currentidx } = this.state;
        if (knowledgeOperate == "add") {//新建
            let new_list = {};
            new_list.name = optparam.value[0];
            new_list.kId = optparam.rowid;
            new_list.rate = "0";
            new_list.display = "none";
            _data[currentindex].klist.push(new_list);
        } else if (knowledgeOperate == "edit" || knowledgeOperate == "view") {//编辑
            let new_list = _data[currentindex].klist[currentidx];
            new_list.name = optparam.value[0];
        }
        KnowledgeMapEditStore.datas = _data;
        this.onDialogCancel();
    }
    onBrowserChange(ids, names, datas, index) {
        let { KnowledgeMapEditStore } = this.props;
        if (ids) {
            let _data = KnowledgeMapEditStore.datas;
            for (let i = 0; i < datas.length; i++) {
                let new_list = {};
                new_list.name = datas[i].name;
                new_list.kId = datas[i].id;
                new_list.rate = "0";
                new_list.display = "none";
                _data[index].klist.push(new_list);
            }
            KnowledgeMapEditStore.datas = _data;
        }
    }
    //添加一行表格数据
    willAdd(datas, addData, type) {
        const { KnowledgeMapEditStore } = this.props;
        if (type == "datas") {
            let length = datas.length;
            datas[length - 1].klist = [];
            KnowledgeMapEditStore.datas = datas;
        } else if (type == "maptypelist") {
            KnowledgeMapEditStore.maptypelist = datas;
        }
    }
    //删除表格数据
    willDelete(datas, keys, type) {
        const { KnowledgeMapEditStore } = this.props;
        return new Promise((resolve, reject) => {
            Modal.confirm({
                content: `确定要删除吗？`,
                onOk: () => {
                    resolve(true);
                    let list = KnowledgeMapEditStore[type];
                    for (let j = 0; j < list.length; j++) {
                        for (let i = 0; i < keys.length; i++) {
                            if (list[j].id == keys[i]) {
                                KnowledgeMapEditStore[type].remove(list[j]);
                            }
                        }
                    }
                },
                onCancel: () => {
                    resolve(false);
                },
            })
        })
    }
    //复制单元格
    willCopy(datas, selectedKeys, copyDatas) {
        const { KnowledgeMapEditStore } = this.props;
        KnowledgeMapEditStore.datas = datas;
    }
    //编辑单元格回调
    willEdit(datas, result, type) {
        let tip = "";
        let days = 0;
        let flag = false;
        const { key, record, value, index } = result;
        if (flag) {
            if (tip.length > 0) {
                Modal.warning({
                    title: "提示",
                    content: tip,
                });
            }
            datas[index] = record;
            const { KnowledgeMapEditStore } = this.props;
            KnowledgeMapEditStore[type] = datas;
        } else {
            const { KnowledgeMapEditStore } = this.props;
            KnowledgeMapEditStore[type] = datas;
        }

    }

    renderDetail() {
        if (this.isfresh) {
            this.isfresh = false;
            const { KnowledgeMapEditStore } = this.props;
            this.setState({ knowledgeId: this.props.knowledgeId, refeshid: this.props.refeshid });
            KnowledgeMapEditStore.getKnowledgeDetail({ "knowledgeId": this.props.knowledgeId, "operation": this.props.operation });
        }
    }
    onRadioChange = (e) => {
        const { KnowledgeMapEditStore } = this.props;
        let _type = e.target._type;
        if (_type && _type == 1) {
            KnowledgeMapEditStore.type = 1;
            KnowledgeMapEditStore.iframeSrc = "/knowledgeMap/base/MapModelType.jsp?mapId=" + this.props.knowledgeId;
        } else {
            KnowledgeMapEditStore.type = 0;
        }
        KnowledgeMapEditStore.tId = e.target.value;
    }

    saveMapType() {
        const { KnowledgeMapEditStore } = this.props;
        const result = this.table.doValidate();
        KnowledgeMapEditStore.maptypelist.forEach(element => {
            if(window.isNaN(element.dsporder)){
                element.dsporder="";
               // message.error("排序内容只能为数字！");
                result.pass=false;
                return;
            }
        });
        if (result.pass) {
            KnowledgeMapEditStore.saveMapType({
                "maptypelist": JSON.stringify(KnowledgeMapEditStore.maptypelist), doback: function () {
                    message.success("保存成功！");
                }
            });
        }
    }

    /**上传附件 */
    uploadChange(ids, list) {
        const { KnowledgeMapEditStore } = this.props;
        if (ids.length > 0) {
            KnowledgeMapEditStore.previewimg = ids[0];
            KnowledgeMapEditStore.previewimgArray = list;
        }else{
            KnowledgeMapEditStore.previewimgArray = [];
            KnowledgeMapEditStore.previewimg = "";
        }
    }


    render() {
        let { KnowledgeMapEditStore, _minusHeight } = this.props;
        if (_minusHeight == undefined) { _minusHeight = 0; }
        const { viewHeight, columns, operation, knowledgeId, knowledgeOperate, kid, refeshid, visible2, visibleMapType, menu1, menu2, menu3, menu4, menu5, menu6, columnsMapType } = this.state;
        const { loading, name, remark, datas, hasRight, mbtitle, mbbg, modellist, tId, type, iframeSrc, maptypelist, maptypeOption, maptype,previewimgArray } = KnowledgeMapEditStore;
        if ((knowledgeId != this.props.knowledgeId || refeshid != this.props.refeshid) && (operation == 'edit' || operation == 'view')) {
            this.isfresh = true;
            this.renderDetail();
        }
        let menu = [];
        if (operation == "add") {
            menu.push(menu6);
            menu.push(menu5);
        } else if (operation == "edit") {
            menu.push(menu6);
            menu.push(menu5);
            menu.push(menu3);
            menu.push(menu4);
        } else if (operation == "view") {
            menu.push(menu1);
            menu.push(menu2);
            menu.push(menu5);
            menu.push(menu3);
            menu.push(menu4);
        }
        return (
            <div className="knowledge-knowledgeMap-edit">
                <div className="knowledge-edit-title-div">
                    <div className="title-Incon"><span className="icon-coms-doc" style={{ fontSize: '16px', float: 'left' }} ></span><b className="title-Incon-name">知识地图</b></div>
                    {((operation == 'edit' && hasRight == true) || operation == 'add') && <div className="title-save" onClick={() => this.saveData()}><Icon type="save" /><b className="title-save-name">保存</b></div>}
                    {operation == 'view' && hasRight == true && <div className="title-save" onClick={() => this.editData()}><Icon type="edit" /><b className="title-save-name">编辑</b></div>}
                </div>
                <WeaRightMenu datas={menu} showUrlItem={false} style={{ height: '100%' }}>
                    <WeaNewScroll height={viewHeight} >
                        <WeaPopoverHrm />
                        <Spin spinning={loading}>
                            < WeaSearchGroup title={getLabel(1361, "基本信息")} needTigger={false} showGroup={true}>
                                <WeaFormItem labelCol={{ span: 4 }} wrapperCol={{ span: 17 }} className="iteamClass" label={getLabel(27939, '知识地图') + getLabel(195, '名称')} >
                                    <WeaInput value={name} viewAttr={operation == "view" ? "1" : "3"} onChange={(val) => this.onInputChange(val, 'name', getLabel(27939, '知识地图') + getLabel(195, '名称'))} />
                                </WeaFormItem>
                                <WeaFormItem labelCol={{ span: 4 }} wrapperCol={{ span: 17 }} className="iteamClass" label={getLabel(27939, '知识地图') + getLabel(433, '描述')}  >
                                    <WeaRichText
                                        viewAttr={operation == "view" ? 1 : 2}
                                        value={remark}
                                        style={{ marginTop: '20px', marginLeft: '20px', marginRight: '20px', width: '96%' }}
                                        ckConfig={{
                                            toolbar: [
                                                { name: 'document', items: ['Source'] },
                                                { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'] },
                                                { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                                                { name: 'colors', items: ['TextColor'] },
                                                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike',] },
                                                { name: 'insert', items: ['Image','Table', 'Smiley'] }
                                            ],
                                            uploadUrl: "/api/knowledge/knowledgeMap/uploadDoc?category=6604", // 上传地址
                                            height: 150,
                                            autoGrow_minHeight: 150,
                                            autoGrow_maxHeight: 150,
                                        }}
                                        onChange={(text) => { this.onInputChange(text, "remark", getLabel(27939, '知识地图') + getLabel(433, '描述')) }}
                                    />
                                </WeaFormItem>
                                <WeaFormItem labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} className="iteamClass" label={getLabel(16450, '显示模板')} >
                                    {
                                        ((operation == 'edit' && hasRight == true) || operation == 'add') ? <RadioGroup onChange={e => this.onRadioChange(e)} value={tId}>
                                            {modellist && modellist.length > 0 && modellist.map(function (da, idx) {
                                                return (
                                                    <Radio value={da.id} _type={da.type}>
                                                        <img style={{ verticalAlign: "middle", cursor: "pointer", width: "80px", height: "60px" }} title={da.name} src={"/knowledgeMap/images/" + da.bg + ".jpg"} />
                                                    </Radio>
                                                )
                                            })}
                                        </RadioGroup> :
                                            <div title={mbtitle}><img src={"/knowledgeMap/images/" + mbbg + ".jpg"} style={{ verticalAlign: "middle", cursor: "pointer" }} /></div>
                                    }
                                </WeaFormItem>
                                <WeaFormItem labelCol={{ span: 4 }} wrapperCol={{ span: 17 }} className="iteamClass" label={getLabel(455, '分类')} >
                                    <WeaSelect
                                        style={{ width: 200, float: "left" }}
                                        viewAttr={operation == "view" ? 1 : 2}
                                        options={toJS(maptypeOption)}
                                        value={maptype}
                                        onChange={(v, showname) => { this.onInputChange(v, "maptype", getLabel(455, '分类')) }}
                                    />
                                    {operation != "view" && <span title="编辑分类" style={{ paddingTop: "3px", float: "left", cursor: 'pointer' }} onClick={() => this.setState({ visibleMapType: true })}><i className="icon-coms-BatchEditing-Hot" style={{ fontSize: '23px', marginLeft: '10px' }} /></span>}
                                </WeaFormItem>
                                <WeaFormItem labelCol={{ span: 4 }} wrapperCol={{ span: 17 }} className="iteamClass" label={getLabel(27485, '预览图片')} >
                                    <WeaUpload
                                        listType = {'img'}
                                        maxFilesNumber = {"1"}
                                        multiSelection = {false}
                                        limitType = {'jpg,gif,png'}
                                        uploadUrl={'/api/knowledge/knowledgeMap/uploadDoc?category=6604'}
                                        category={"6604"}
                                        datas={toJS(previewimgArray)}
                                        viewAttr={operation == "view" ? 1 : 2}
                                        showOrder={true}
                                        isDetail={false}
                                        autoUpload={true}
                                        showClearAll={false}
                                        onChange={(ids, list) => this.uploadChange(ids, list)}
                                    />
                                </WeaFormItem>
                            </WeaSearchGroup >
                            {
                                type == 1 ? <div className="model-main">
                                    <div className="model-main-title">{getLabel(27939, "知识地图") + getLabel(17463, "明细")}</div>
                                    <iframe id="modelView" name="modelView" scrolling="auto"
                                        style={{ border: "none" }} src={iframeSrc} width='100%' height={viewHeight}></iframe>
                                </div>
                                    :
                                    <WeaSearchGroup title={getLabel(27939, "知识地图") + getLabel(17463, "明细")} needTigger={false} showGroup={true}>
                                        <WeaTableEditable
                                            viewAttr={operation == "view" ? 1 : 2}
                                            ref='tableEdit'
                                            columns={columns}
                                            datas={toJS(datas)}
                                            showCopy={false}
                                            willAdd={(datas, addData) => this.willAdd(datas, addData, "datas")}
                                            willDelete={(datas, keys) => this.willDelete(datas, keys, "datas")}
                                            willEdit={(datas, result) => this.willEdit(datas, result, "datas")}
                                            validator={{
                                                rules: {
                                                    title: 'required',
                                                },
                                                errorMessage: {
                                                    required: '此项必填',
                                                },
                                            }
                                            }
                                        />
                                    </WeaSearchGroup>
                            }
                            <WeaDialog
                                onCancel={() => this.onDialogCancel()}
                                title={knowledgeOperate == "add" ? "新建知识点" : "编辑知识点"}
                                visible={visible2}
                                style={{ width: 1000, height: this.getHeight() + 110 }}
                                hasScroll
                            >
                                <KnowledgeEdit knowledgeId={kid} operation={knowledgeOperate} onCallBackSuccess={(optparams) => this.addNewKnowledge(optparams)} />
                            </WeaDialog>

                            <WeaDialog
                                onCancel={() => this.setState({ visibleMapType: false })}
                                title={getLabel(27939, "知识地图") + getLabel(455, "分类")}
                                visible={visibleMapType}
                                style={{ width: 1000, height: this.getHeight() + 110 }}
                                hasScroll
                                buttons={[<Button type="primary" onClick={()=>this.saveMapType()}>保存</Button>]}
                            >   <WeaRightMenu datas={[
                                {
                                    key: '1',
                                    icon: <i className='icon-coms-save' />,
                                    content: '保存',
                                    onClick: key => this.saveMapType()
                                }
                            ]}>
                                    <WeaTableEditable
                                        ref={el => {
                                            this.table = el;
                                        }}
                                        columns={columnsMapType}
                                        datas={toJS(maptypelist)}
                                        showCopy={false}
                                        willAdd={(datas, addData) => this.willAdd(datas, addData, "maptypelist")}
                                        willDelete={(datas, keys) => this.willDelete(datas, keys, "maptypelist")}
                                        willEdit={(datas, result) => this.willEdit(datas, result, "maptypelist")}
                                        validator={{
                                            rules: {
                                                name: 'required',
                                                dsporder: 'required',
                                            },
                                            errorMessage: {
                                                required: '此项必填',
                                            },
                                        }}
                                    />
                                </WeaRightMenu>
                            </WeaDialog>
                        </Spin>
                    </WeaNewScroll>
                </WeaRightMenu>
            </div >
        )
    }
};